<template>
    <div>
        <NavSimple></NavSimple>
        <div class="page-wrap">
			<div class="w">
				<div class="user-con">
					<div class="user-title">找回密码</div>
					<div class="user-box">
						<div class="error-item">
							<i class="fa fa-minus-circle error-icon"></i>
							<p class="error-msg"></p>
						</div>
						<div class="step-con step-username" style="display: block;">
							<p class="user-item-text">请输入用户名：</p>
							<div class="user-item">
								<label class="user-label" for="">
									<i class="fa fa-user"></i>
								</label>
								<input class="user-content" id="username" placeholder="请输入用户名" autocomplete="off">
							</div>
							<a class="btn btn-submit" id="submit-username">下一步</a>
						</div>
						<div class="step-con step-question">
							<p class="user-item-text">密码提示问题是：<span class="question"></span></p>
							<div class="user-item">
								<label class="user-label" for="">
									<i class="fa fa-key"></i>
								</label>
								<input class="user-content" id="answer" placeholder="请输入密码提示问题答案" autocomplete="off">
							</div>
							<a class="btn btn-submit" id="submit-question">下一步</a>
						</div>
						<div class="step-con step-password">
							<p class="user-item-text">请输入新密码：</p>
							<div class="user-item">
								<label class="user-label" for="">
									<i class="fa fa-lock"></i>
								</label>
								<input type="password" class="user-content" id="password" placeholder="请输入新密码" autocomplete="off">
							</div>
							<a class="btn btn-submit" id="submit-password">下一步</a>
						</div>

						<div class="link-item">
							<a class="link" href="./user-login.html" target="_blank">返回登录&gt;&gt;</a>
						</div>
					</div>
				</div>
			</div>
		</div>
        <Footer></Footer>
    </div>
</template>
<script>
import {doGetUserQuestion, doUserCheckAnswer, doUserForgetRestPassword} from '@/api/commonApi'
import NavSimple from "@/views/layout/nav-simple.vue";
import Footer from "@/views/layout/footer.vue";
export default {
    name: "password-reset",
    components: {NavSimple, Footer},
    data: function() {
      return {
          token: "",
          currentUser: {
              username: "",
              question: ""
          }
      }
    },
    methods: {
        // 加载输入密码提示问题答案的一步
        loadStepQuestion : function(){
            // 清除错误提示
            this.formErrorHidden();
            // 做容器的切换
            $('.step-username').hide()
                .siblings('.step-question').show()
                .find('.question').text(this.currentUser.question);
        },
        // 加载输入password的一步
        loadStepPassword : function(){
            // 清除错误提示
            this.formErrorHidden();
            // 做容器的切换
            $('.step-question').hide()
                .siblings('.step-password').show();
        },
        formErrorShow(errMsg){
            $('.error-item').show().find('.err-msg').text(errMsg);
        },
        formErrorHidden(){
            $('.error-item').hide().find('.err-msg').text('');
        },
        getUserQuestion(){
            var _this = this;
            var username = $.trim($('#username').val());
            // 用户名存在
            if(username){
                let formData = {username};
                doGetUserQuestion(formData).then((res) => {
                    if(res.data.status === 200){ 
                        _this.currentUser.question = res.data.data
                        _this.currentUser.username = username
                        _this.loadStepQuestion();
                    } else {
                        Toast.warning(res.data.message);
                    }
                })
            }
            // 用户名不存在
            else{
                Toast.warning('请输入用户名');
            }
        },
        checkAnswer(){
            var _this = this;
            var answer = $.trim($('#answer').val());
            // 密码提示问题答案存在
            if(answer){
                let formData = {answer, "username": _this.currentUser.username, "question": _this.currentUser.question}
                doUserCheckAnswer(formData).then((res) => {
                    if(res.data.status === 200){
                        _this.token = res.data.data
                        _this.loadStepPassword()
                    } else {
                        Toast.warning(res.data.message);
                    }
                })
            }
            // 用户名不存在
            else{
                Toast.warning('请输入密码提示问题答案');
            }
        },
        forgetRestPassword(){
            var _this = this;
            var password = $.trim($('#password').val());
            // 密码不为空
            if(password && password.length >= 6){
                password = hexMd5(password, KEY)
                // 检查密码提示问题答案
                let formData = {"passwordNew": password, "forgetToken": _this.token, "username": _this.currentUser.username}
                doUserForgetRestPassword(formData).then((res) => {
                    if(res.data.status === 200){
                        _this.$router.push("./result.html?type=pass-reset")
                        Toast.success("重置密码成功")
                    } else {
                        Toast.warning(res.data.message);
                    }
                })
            }
            // 密码为空
            else{
                Toast.warning('请输入不少于6位的新密码');
            }
        }
    },
    mounted () {
        var _this = this;
        // 如果按下回车，也进行提交
        $('#username').keyup(function(e){
            // keyCode == 13 表示回车键
            if(e.keyCode === 13){
                _this.getUserQuestion();
            }
        });
        $('#answer').keyup(function(e){
            // keyCode == 13 表示回车键
            if(e.keyCode === 13){
                _this.checkAnswer();
            }
        });
        $('#password').keyup(function(e){
            // keyCode == 13 表示回车键
            if(e.keyCode === 13){
                _this.forgetRestPassword();
            }
        });
        
        // 输入用户名后下一步按钮的点击
        $('#submit-username').click(function(){
            _this.getUserQuestion();
        });
        // 输入密码提示问题答案中的按钮点击
        $('#submit-question').click(function(){
            _this.checkAnswer();
        });
        // 输入新密码后的按钮点击
        $('#submit-password').click(function(){
            _this.forgetRestPassword();
        });
    }
}
</script>
<style scoped>

/* 最外层容器 */
.page-wrap{
    padding: 40px 0;
}
/* 表单框 */
.user-con{
    position: relative;
    margin: 0 auto;
    width: 400px;
    background: #fff;
}
.user-con .user-title{
    text-align: center;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    font-size: 18px;
    font-weight: bold;
    color: #666;
}
.user-con .user-box{
    padding: 20px;
}
/* 错误提示框 */
.user-con .user-box .error-item{
    position: relative;
    padding: 4px 0 4px 40px;
    margin-bottom: 10px;
    border: 1px solid red;
    color: red;
    background: #fde9e9;
    display: none;
}
/* 错误图标 */
.user-con .user-box .error-icon{
    position: absolute;
    left: 14px;
    top: 50%;
    font-size: 14px;
    margin-top: -7px;
}
/* 每一步的容器 */
.user-con .step-con{
    display: none;
}
/* 输入框提示信息 */
.user-con .user-item-text{
    margin-bottom: 10px;
    font-size: 14px;
}
/* 输入框容器 */
.user-con .user-item{
    position: relative;
    margin-bottom: 20px;
}
.user-con .user-item .user-label{
    position: absolute;
    left: 1px;
    top: 1px;
    bottom: 1px;
    width: 40px;
    line-height: 36px;
    background: #f3f3f3;
    font-size: 18px;
    color: #d3d3d3;
    text-align: center;
    border-right: 1px solid #bdbdbd;
}
.user-con .user-item .user-content{
    padding: 10px 0 10px 50px;
    width: 308px;
    height: 18px;
    line-height: 18px;
    font-size: 15px;
    border: 1px solid #bdbdbd;
    outline: none;
}
.user-con .btn-submit{
    width: 100%;
    padding: 2px 0;
    text-align: center;
    font-size: 20px;
}
/* 跳转链接 */
.user-con .link-item{
    text-align: right;
    margin-top: 10px;
}
.user-con .link-item .link{
    margin-left: 10px;
    color: #999;
}
</style>
